<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 1.使用 <div> 元素： <div> 元素是最通用的块级容器，可以用来组织和布局页面的不同部分。通过设置样式，可以控制 <div> 的位置、大小和样式。 -->
  <div id="header">Header</div>
  <div id="content">Content</div>
  <div id="footer">Footer</div>

  <!-- 2.使用表格布局： 尽管不推荐将表格用于整体页面布局，但对于某些特定情况，使用 <table>、<tr> 和 <td> 元素可以实现简单的布局。 -->
  <table>
    <tr>
      <td>Header</td>
    </tr>
    <tr>
      <td>Content</td>
    </tr>
    <tr>
      <td>Footer</td>
    </tr>
  </table>

  <!-- 3.使用 Flexbox 布局： Flexbox 是一种强大的布局模型，可以方便地实现水平和垂直方向的布局，适用于一维布局的情况。 -->
  <div style="display: flex; flex-direction: column;">
    <div id="header">Header</div>
    <div id="content">Content</div>
    <div id="footer">Footer</div>
  </div>

  <!-- 4.使用 Grid 布局： Grid 布局是一个二维的布局模型，可以更灵活地定义行和列，适用于复杂的页面布局。 -->
  <div style="display: grid; grid-template-rows: auto 1fr auto; grid-gap: 10px;">
    <div id="header">Header</div>
    <div id="content">Content</div>
    <div id="footer">Footer</div>
  </div>

  <!-- 5.使用 CSS Grid 和 Flexbox 结合： 可以结合使用 Grid 和 Flexbox，根据需要选择不同的布局模型。 -->
  <div style="display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; grid-gap: 10px;">
    <div id="header">Header</div>
    <div style="display: flex; flex-direction: column;">
      <div id="content">Content</div>
    </div>
    <div id="footer">Footer</div>
  </div>
</body>

</html>